import {Panel, Tree} from "rc-easyui"
import {useContext, useEffect, useState} from "react";
import {tree} from "../../../service/bucket_service";
import {BucketDetailContext} from "./context";

const TreePanel = () => {

    const [data, setData] = useState([]);
    const {pageConfig, ctx, ctxState, bucket, setCurrentPath} = useContext(BucketDetailContext)

    const queryParams = new URLSearchParams(location.search);
    const id = queryParams.get("id");

    useEffect(() => {
        tree(id, "", "").then(({code, data}) => {
            if (code === 200) {
                setData(data.data);
            }
        })
    }, []);

    const renderNode = ({ node }) => {
        let count = node.params?.count||0;
        if (count > 0) {
            let c = <span style={{ color: 'blue' }}> ({count})</span>
            return (
                <span>{node.params.filename}{c}</span>
            )
        }
        return (
            <span>{node.params.filename}</span>
        )
    }

    const nodeClick = (value) => {
        ctx.search({id: bucket.id, dir: value.path})
        setCurrentPath('/'+value.path)
    }

    return (
        <Panel title={bucket?.remark} bodyStyle={{ padding: 5 }} style={{ height: '100%' }} bordered={false}>
            <Tree data={data} render={renderNode} onNodeClick={nodeClick}></Tree>
        </Panel>
    )
}

export default TreePanel;
